<template>
  <el-dropdown trigger="click" v-bind="$attrs" v-on="$listeners">
    <span class="el-dropdown-link">
      <el-tooltip effect="dark" content="标题" placement="top-start">
        <div class="el-tiptap-editor__command-button">
          <svg
            aria-hidden="true"
            width="16"
            height="16"
            viewBox="0 0 512 512"
            focusable="false"
            class="fa-icon"
          >
            <g>
              <path
                d="M448 96v320h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-160c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16h32v-128h-192v128h32c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-160c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16h32v-320h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16h160c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-32v128h192v-128h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16h160c8.8 0 16 7.2 16 16v32c0 8.8-7.2 16-16 16h-32z"
              ></path>
            </g>
          </svg>
        </div>
      </el-tooltip>
    </span>
    <el-dropdown-menu slot="dropdown" class="app_el_dropdown_menu">
      <el-dropdown-item
        v-for="item in level"
        :command="item"
        :key="item"
        :style="{
          fontSize: (level - item) * 2 + 12 + 'px',
          fontWeight: item < level ? 'bold' : 'normal',
        }"
        >标题{{ item }}</el-dropdown-item
      >
    </el-dropdown-menu>
  </el-dropdown>
</template>
<script>
export default {
  props: ["level"],
};
</script>